<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no" />
	<title>愉直播</title>
	<link rel="stylesheet" type="text/css" href="../c/aui.css" />
	<style>
		body {
			background: #f8f8f8;
			color: #222;
		}

		#sx-header {
			/*background: #fff !important;*/
		}

		.aui-btn img {
			width: 0.75rem;
		}

		.aui-title {
			/*color: #222;*/
		}

		.footer {
			width: 100%;
			display: flex;
			justify-content: center;
			overflow: hidden;
		}

		.footer .tijiao {
			margin: 0.75rem;
			margin-top: 0;
			background: #FE2C55;
			color: #fff;
			border-radius: 0.15rem;
			padding: 0.75rem 0rem;
			font-size: 0.75rem;
			text-align: center;
			width: 100%;
		}

		.info {
			background: #fff;
			margin: 0.75rem 0;
			padding: 0 0.75rem;
		}

		.info div {
			border-top: 1px solid #f3f3f3;
			padding: 0.25rem 0;
			font-size: 0.75rem;
		}

		.info div:first-child {
			border: 0;
		}

		.info div#diqu {}

		.info div#diqu:before {
			content: "\e6f5";
			position: absolute;
			right: 0.75rem;
			top: 0.75rem;
			color: #999
		}

		.info div input {
			height: auto;
			line-height: inherit;
			padding: 0.5rem 0;
		}

		.img_s {
			background: #fff;
			margin-top: 0.75rem;
		}

		.img_s .h4 {
			padding-left: 0.75rem;
			padding-top: 0.75rem;
			font-size: 0.75rem;
		}

		.img {
			padding: 0.75rem;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.img .r {
			width: 4rem;
			margin-right: 1rem;
		}

		.img .l {
			margin-left: 1rem;
			text-align: center;
		}

		.img .l div {
			color: #f00;
			font-size: 0.65rem;
			color: #999;
			padding-top: 0.5rem;
		}

		.img .l img.shangchuan {
			width: 2rem;
			/*border: 1px solid #515151;*/
			/*padding: 0.5rem;*/
			margin: 0 auto;
			opacity: 0.3
		}

		.img_list {
			margin: 0.75rem 0;
			/*margin-bottom: 5rem;
			padding-bottom: 5rem;*/
			background: #fff;
		}

		.img_list .h4 {
			padding-left: 0.75rem;
			padding-top: 0.75rem;
			font-size: 0.75rem;
		}

		.img_list .list {
			padding: 0.5rem;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
		}

		.img_list .list div {
			width: 25%;
		}

		.img_list .list div img {
			padding: 0.25rem;
		}

		.img_list .list div img.shangchuan {
			opacity: 0.3;
		}

		.img .r,
		.img_list .list div {
			position: relative;
		}

		.img_list .list div em {
			position: absolute;
			top: 0rem;
			right: 0rem;
			background: #f00 url('../i/x.png');
			background-repeat: no-repeat;
			background-position: center center;
			background-size: 0.5rem;
			width: 1rem;
			height: 1rem;
			border-radius: 50%;
			border: 1px solid #f00;
		}
	</style>
</head>

<body>

    <div class="aui-content aui-margin-b-15">
        <ul class="aui-list aui-form-list">
            <li class="aui-list-header"></li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        类型
                    </div>
                    <div class="aui-list-item-input">
                        <select id="shopType">

                        </select>
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        名称
                    </div>
                    <div class="aui-list-item-input" id="title">
                        <input type="text" placeholder="请输入店铺名称">
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        手机号码
                    </div>
                    <div class="aui-list-item-input" id="mobile">
                        <input type="number" placeholder="请输入手机号码">
                    </div>
                </div>
            </li>
        </ul>
    </div>

    <div class="aui-content aui-margin-b-15">
        <ul class="aui-list aui-form-list">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <!-- <div class="aui-list-item-label">
                        描述
                    </div> -->
                    <div class="aui-list-item-input" id="content">
                        <textarea placeholder="请输入店铺描述"></textarea>
                    </div>
                </div>
            </li>
        </ul>
    </div>

	<!-- <div class="info">
		<div id="title"><input type="text" placeholder="小店标题" value=""></div>
		<div id="content">
			<textarea placeholder="小店描述"></textarea>
		</div>
		<div id="mobile"><input type="tel" placeholder="手机号码" value=""></div>
	</div> -->

	<div class="img_s" style="margin-bottom:0.75rem;">
		<div class="h4">店铺图标</div>
		<div class="img imgLogo">
			<div class="r aui-hide">
				<img src="../i/logo.png">
			</div>
			<div class="l" tapmode onclick="img()">
				<img src="../i/shangchuan.png" class="shangchuan">
				<div>上传图片建议400*400尺寸效果更佳</div>
			</div>
		</div>
	</div>

	<div class="img_s" style="margin-bottom:0.75rem;">
		<div class="h4">店铺资质</div>
		<div class="img imgCp">
			<div class="r aui-hide">
				<img src="../i/logo.png">
			</div>
			<div class="l" tapmode onclick="imgCp()">
				<img src="../i/shangchuan.png" class="shangchuan">
				<div>上传营业执照或者个体工商户，仅用于审核</div>
			</div>
		</div>
	</div>

	<div class="aui-content aui-margin-b-15">
			<ul class="aui-list aui-form-list">
				<li class="aui-list-item">
						<div class="aui-list-item-inner">
								<div class="aui-list-item-label">
										保证金
								</div>
								<div class="aui-list-item-input" style="text-align: right;">
										<label><input class="aui-radio" type="radio" checked><span id="shopEarnestMoney">?</span></label>
								</div>
						</div>
				</li>
			</ul>
	</div>

	<!-- <div class="aui-btn-block aui-btn aui-btn-danger aui-margin-t-15 aui-margin-b-15" tapmode onclick="_url({url:'pay',title:'支付'})">跳转支付</div> -->

	<div class="footer">
		<div class="tijiao" tapmode onclick="data()">
			申请开通店铺并缴纳保证金
		</div>
	</div>
</body>
<script type="text/javascript" src="../j/api.js"></script>
<script type="text/javascript">
	var img_data,img_list_data,img_cp;
	var qnData = {};
	var qnLocal = {};
	var sem = 0;
	apiready = function() {
		$api.fixTabBar($api.dom('.footer'))
		shopTypeList()
		getSem()


		// 监听支付消息
		api.addEventListener({
			name: '_pay'
		}, function(ret, err) {
			console.log(JSON.stringify(ret) + JSON.stringify(err))
			api.sendEvent({
			    name: 'member_right',
			    extra: {
			        close: true
			    }
			});
			_alert(ret.value.msg, function(ret, err) {
				_close();
			})
		});

	}

	// 请求店铺类型
	function shopTypeList() {
			_ajax('shop/stList', function(ret, err) {
				console.log(JSON.stringify(ret));
				console.log(JSON.stringify(err));
				if (ret) {
					var html = '<option value="0">请选择店铺类型</option>';
					for (var i = 0; i < ret.length; i++) {
						html += '<option value="' + ret[i].id + '">' + ret[i].cname + '（费率：' + ret[i].rate + '%）</option>';
					}
					console.log(html)
					$api.append($api.byId("shopType"), html);
				} else {
					_alert('店铺类型获取失败');
				}
			})
	}

	// 请求店铺保证金
	function getSem() {
			_ajax('shop/getSem', function(ret, err) {
				console.log(JSON.stringify(ret));
				console.log(JSON.stringify(err));
				if (ret) {
					sem = ret[0]
					$api.text($api.byId('shopEarnestMoney'), '￥' + ret[0]);
				} else {
					_alert('店铺保证金获取失败');
				}
			})
	}

	// 获取Form表单数据
	function data() {
		document.activeElement.blur();
		qnData = {};
		var data = {};
		data.types_id = $('#shopType').val();
		if (data.types_id < 1) {
			return _msg('请先选择店铺类型');
		}
		data.title = $('#title input').val();
		if (!data.title) {
			return _msg('请填写店铺名称');
		}
		data.mobile = $('#mobile input').val();
		if (!data.mobile) {
			return _msg('请填写店铺手机号码');
		}
		data.content = $('#content textarea').val();
		if (!data.content) {
			return _msg('请填写店铺描述');
		}
		if(!qnLocal.img_data){
			return _msg('请上传店铺图标');
		}
		if(!qnLocal.img_cp){
			return _msg('请上传店铺资质');
		}

		// 提示缴纳保证金
		api.confirm({
			title: '提示',
			msg: '申请开通店铺需要缴纳￥' + sem + '保证金。店铺关闭后，您可以在钱包里申请提现。点击确定后将提交店铺信息并唤起支付。',
			buttons: [ '确定', '取消' ]
		}, function ( ret, err ) {
			var index = ret.buttonIndex;
			if ( index == 1 ) {
				console.log('点击了确定按钮')

				// 批量循环上传七牛云图片
				_loading('正在上传图片...');
				$.each(qnLocal, function(name, value) {

						console.log(name, value)

							_qiniu(value,function(ret,err){
								if (ret.status) {
										if (ret.oper == "complete") {
											qnData[name] = ret.info.key
											if (Object.getOwnPropertyNames(qnData).length == 2) {
												_add(data);
											}
											// 确定上传
										}
								}else{
									_loadingCloes();
									console.log(JSON.stringify(err));
									_alert('上传图片失败，请联系客服');
								}
							});

				});

			}
		})

	}

	// 发起请求开通商铺
	function _add(data){
		// console.log(data, qnData)
		data.img = qnData.img_data
		data.certification_path = qnData.img_cp
		data.earnest_money = sem * 100
		_ajax('shop/user_add', function(ret, err) {
			_loadingCloes();
			console.log(JSON.stringify(ret), JSON.stringify(err))

			if (ret) {
				if (ret.ret) {

					// 走支付流程
					pay(data.earnest_money, ret.data.id)

				} else {
					_msg(ret.err)
				}
			} else {
			//	_alert(JSON.stringify(err))
			}
		}, data)
	}

	// 支付流程
	function pay(money, suid) {
		if(_getPrefs('_config').pay.alipay == 1 && _getPrefs('_config').pay.weixin == 1){
			var buttons = ['支付宝', '微信'];
			var channel = ['ALI_APP','WX_APP'];
		}else if(_getPrefs('_config').pay.alipay == 1){
			var buttons = ['支付宝'];
			var channel = ['ALI_APP']
		}else if(_getPrefs('_config').pay.weixin == 1){
			var buttons = ['微信'];
			var channel = ['WX_APP']
		}else{
			return _msg('支付未开放，敬请期待！');
		}
		api.actionSheet({
			title: '选择支付方式',
			cancelTitle: '取消',
			buttons: buttons
		}, function(ret, err) {
			var index = ret.buttonIndex;
			var data = {};
			data.money = money * 100;
			// data.money = 0.01 * 100;
			data.type = 4;
			data.suid = suid
			if(channel.length+1 == index){
				return _msg('支付取消');
			}
			data.channel = channel[index-1];
			_pay(data);
		});
	}

	// 上传logo
	function img() {
		document.activeElement.blur();
		api.actionSheet({
			title: '上传店铺图标',
			cancelTitle: '取消',
			buttons: ['拍照', '相册']
		}, function(ret, err) {
			var index = ret.buttonIndex;
			if (index != 3) {
				var sourceType = index == 1 ? 'camera' : 'album'
				api.getPicture({
					sourceType: sourceType,
					encodingType: 'jpg',
					mediaValue: 'pic',
					destinationType: 'url',
					allowEdit: false,
					quality: 100,
				}, function(ret, err) {
					console.log(JSON.stringify(ret));
					if (ret) {
						if (ret.data) {
							img_data = ret.data;
							qnLocal.img_data = ret.data;
							$('.imgLogo .r img').attr('src', ret.data);
							$('.imgLogo .r').removeClass('aui-hide');
						}
					}
				});
			}
		});
	}

	// 上传商铺资质
	function imgCp() {
		document.activeElement.blur();
		api.actionSheet({
			title: '上传店铺资质',
			cancelTitle: '取消',
			buttons: ['拍照', '相册']
		}, function(ret, err) {
			var index = ret.buttonIndex;
			if (index != 3) {
				var sourceType = index == 1 ? 'camera' : 'album'
				api.getPicture({
					sourceType: sourceType,
					encodingType: 'jpg',
					mediaValue: 'pic',
					destinationType: 'url',
					allowEdit: false,
					quality: 100,
				}, function(ret, err) {
					console.log(JSON.stringify(ret));
					if (ret) {
						if (ret.data) {
							img_cp = ret.data;
							qnLocal.img_cp = ret.data;
							$('.imgCp .r img').attr('src', ret.data);
							$('.imgCp .r').removeClass('aui-hide');
						}
					}
				});
			}
		});
	}
</script>

</html>
